<template>
  <div class="demo">
    <div class="demo-title">TODO</div>
    <div class="demo-content">
      <Switch
        v-model:checked="customize"
        un-checked-children="default"
        checked-children="customize"
      />
      <Divider />
      <ConfigProvider>
        <template v-if="customize" #renderEmpty>
          <div style="text-align: center">
            <smile-outlined style="font-size: 20px" />
            <p>Data Not Found</p>
          </div>
        </template>
        <div class="config-provider">
          <h3>Select</h3>
          <Select :style="style" :options="[]" />
          <h3>TreeSelect</h3>
          <TreeSelect :style="style" :tree-data="[]" />
          <h3>Cascader</h3>
          <Cascader :style="style" :options="[]" :show-search="true" />
          <h3>Transfer</h3>
          <Transfer :data-source="[]" />
          <h3>Table</h3>
          <Table style="margin-top: 8px" :columns="columns" :data-source="[]" />
          <h3>List</h3>
          <List :data-source="[]" />
        </div>
      </ConfigProvider>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
  import Cascader from '@sscd/cascader';
  import ConfigProvider from '@sscd/config-provider';
  import Divider from '@sscd/divider';
  import List from '@sscd/list';
  import Select from '@sscd/select';
  import Switch from '@sscd/switch';
  import Table from '@sscd/table';
  import TreeSelect from '@sscd/tree-select';
  import Transfer from '@sscd/transfer';
  const customize = ref<boolean>(false);
  const style = { width: '200px' };
  const columns = [{ title: 'Name' }, { title: 'Age' }];
</script>
